<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" type="text/css" href="__STATIC__/plugins/layui/css/layui.css">
    <script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>
</head>
<body style="background: #1E9FFF">
<div style="position: absolute; left: 50%; top: 50%;width: 500px;margin-left: -250px;margin-top: -200px">
    <div style="background: #FFFFFF;padding: 20px;border-radius: 4px; box-shadow: 5px 5px 20px #444444; ">
        <div class="layui-form">
            <div class="layui-form-item" style="color: gray;">
                <h2>后台管理系统</h2>
            </div>
        </div>
        <hr/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" id="username" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" id="password" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <div class="layui-input-inline">
                <input type="text" id="verifycode" class="layui-input"/>
            </div>
            <img src="{:captcha_src()}" id="img" onclick="reloadImg()">
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" onclick="dologin()">登陆</button>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.use(['layer'], function () {
        $ = layui.jquery;
        layer = layui.layer;

        //用户获取焦点
        $('#username').focus();
        $('input').keydown(function (e) {
            if (e.keyCode == 13) {
                dologin();
            }
        });
    });
    function reloadImg() {
        $('#img').attr('src', '{:captcha_src()}?rand=' + Math.random());
    }
    function dologin() {
        var username = $.trim($("#username").val());
        var password = $.trim($("#password").val());
        var verifycode = $.trim($("#verifycode").val());
        if (username == '') {
            layer.alert("请输入用户名", {icon: 2});
            return;
        }
        if (password == '') {
            layer.alert("请输入密码", {icon: 2});
            return;
        }
        if (verifycode == '') {
            layer.alert("请输入验证码", {icon: 2});
            return;
        }
        $.post('/admins.php/admins/Account/dologin', {
            'username': username,
            'pwd': password,
            'verifycode': verifycode
        }, function (res) {
            var res1 = JSON.parse(res);
            console.log(res1.code);
            console.log(res1.msg);
            if (res1.code > 0) {
                reloadImg();
                layer.alert(res1.msg, {icon: 2});
            } else {
                layer.msg(res1.msg);
                setTimeout(function () {
                    window.location.href ='/admins.php/admins/home/index'
                },1000)
            }
        })

    }
</script>
</html>